<!-- 规则组件 -->
<template>
  <div>
    <div class="card-title card-title-background" >告警规则{{ index+1 }} <a v-if="index > 0" style="margin-left: 30px;" @click="deleteRule">删除</a></div>
    <a-form
      layout='horizontal'
      ref='form'
      :model='rule'
      :rules='rules'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >
      <a-form-item label='维度:' name='monitorCode'>
        <a-select
          show-search
          v-model:value="rule.monitorCode"
          placeholder="请选择维度"
          style="width: 205px;"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :options="ownerBizMonitorCodeNames"
          @change="handleMonitorCodeChange" />
      </a-form-item>

      <a-form-item label='条件:' name='operator'>
        <a-select v-model:value="rule.operator" style="width: 100px;">
          <a-select-option :value="1">大于</a-select-option>
          <a-select-option :value="2">小于</a-select-option>
          <a-select-option :value="3">等于</a-select-option>
        </a-select>
        <a-form-item-rest>
          <a-input v-model:value='rule.limitValue' placeholder='大于/小于/等于的值' allow-clear autocomplete='off' style="width: 250px;margin-left: 5px;"/>
        </a-form-item-rest>
      </a-form-item>

      <a-form-item label='持续周期:' name='periodType'>
        <a-input v-model:value='rule.periodValue' placeholder='次/分钟值' allow-clear autocomplete='off' style="width: 250px;"/>
        <a-form-item-rest>
          <a-select v-model:value="rule.periodType" style="width: 100px;margin-left: 5px;">
            <a-select-option :value="1">次数</a-select-option>
            <a-select-option :value="2">分钟</a-select-option>
          </a-select>
        </a-form-item-rest>
      </a-form-item>

      <a-form-item label='超过阀值后描述:' name='alertDesc'>
        <a-textarea v-model:value="rule.alertDesc" allow-clear autocomplete='off'/>
      </a-form-item>

      <a-form-item label='标签:' name='alertDesc'>
        <template v-for="(tag, index) in rule.tagsarr" :key="tag">
          <a-tag :closable="true" @close="handleClose(tag, index)">
            {{ tag }}
          </a-tag>
        </template>
        <a-input
          v-if="inputVisible"
          ref="inputRef"
          v-model:value="inputValue"
          type="text"
          size="small"
          :style="{ width: '78px' }"
          @blur="handleInputConfirm"
          @keyup.enter="handleInputConfirm"
        />
        <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
          <plus-outlined />
          新增标签
        </a-tag>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import {nextTick } from 'vue';
export default {
  name: 'MonitorsConfObjectsSubRule',
  emits: ['update:value', 'change', 'deleteIndex'],
  props: {
    index : Number,
    ownerBizMonitorCodeNames : Object,
    rule : Object
  },
  data() {
    return {
      rules: [],
      inputVisible: false,
      inputValue: '',
    };
  },
  methods: {
    handleMonitorCodeChange(value, option) {
      this.rule.monitorName = option.label
    },
    deleteRule () {
      this.$emit("deleteIndex", this.index);
    },
    handleClose (removedTag, index)  {
      const tags = this.rule.tagsarr.filter(tag => tag !== removedTag);
      this.rule.tagsarr = tags;
      this.rule.tags = tags.length > 0 ? tags.join(',') : '';
      console.log(index)
    },
    showInput () {
      this.inputVisible = true;
      nextTick(() => {
        this.$refs.inputRef.value.focus();
      });
    },
    handleInputConfirm () {
      const inputValue = this.inputValue;
      let tags = this.rule.tagsarr;
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      console.log(tags);
      this.rule.tagsarr = tags;
      this.inputVisible = false;
      this.inputValue = '';
      this.rule.tags = tags.length > 0 ? tags.join(',') : '';
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  border-left: 5px solid;
  border-color: var(--primary-color);
  padding-left: 10px;
}

.card-title-background {
  background-color: #f5f5f5;
  height: 2em;
  line-height: 2em;
  margin-bottom: 2em;
}
</style>
